<script setup lang="ts">
import type { ActionsButtonType } from '@/components/common-table/types'
import { useShowBtns } from '@/hooks/useShowBtns'

const props = defineProps<{
  buttonList: ActionsButtonType[]
  row: any
  size?: 'large' | 'default' | 'small' | ''
}>()

const showButton = ref(true)

const { showBtn } = useShowBtns(props.buttonList)

const render = (btn: any) => {
  if (btn?.render) {
    return btn?.render(props.row, btn)
  }
  return true
}

const showBtnList = computed(() => {
  return showBtn.value.filter((v: any) => render(v))
})

const handleCommand = (item: any) => {
  showButton.value = false
  setTimeout(() => item.click(props.row, item), 500)
  showButton.value = true
}
</script>

<template>
  <div>
    <el-button
      v-if="showBtnList.length == 1"
      :size="size"
      :type="showBtnList[0].type || 'primary'"
      @click="showBtnList[0]?.click(row, showBtnList[0])"
      >{{ showBtnList[0]?.label }}</el-button
    >
    <el-dropdown
      :size="size"
      v-else-if="showBtnList[0]"
      split-button
      type="primary"
      :tabindex="row.id"
      @click="showBtnList[0]?.click(row, showBtnList[0])"
      @command="handleCommand"
    >
      {{ showBtnList[0]?.label }}
      <template #dropdown>
        <el-dropdown-menu v-if="showButton">
          <template v-for="(item, _) in showBtnList?.slice(1)" :key="_">
            <el-dropdown-item :command="item">
              <el-button :size="size" :type="item.type || 'primary'">{{ item.label }}</el-button>
            </el-dropdown-item>
          </template>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item:not(.is_disabled):focus) {
  background: rgba(0, 0, 0, 0);
}
</style>
